<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>教师登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        body {
            font-size: .4348rem;
            font-family: 微软雅黑;
            /*
            background-color: #fff;*/
            background-color: #4c97fb;
            overflow: hidden;
            /**/
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        a {
            text-decoration: none;
            /*
            color: #8c8c8c;*/
            color: #fff;
        }

        a.register {
            color: #ffffff;
        }

        ul li {
            list-style: none;
        }

        #box {
            /*
            border: 1px solid red;*/
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
        }

        .top {
            /*
            border: 1px solid rgb(255, 0, 0);*/
            border-radius: 0rem 0rem 0rem 100% / 0rem 0rem 0rem 40%;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: content-box;
            padding-bottom: 5.5556rem;
            background-color: #fff;
        }

        .top .icon {
            /*
            border: 1px solid red;*/
            border-radius: 50%;
            width: 1.6908rem;
            height: 1.6908rem;
            margin-top: 2.4155rem;
            margin-bottom: 1.2077rem;
            background: url(../../../../images/login/XGB_logo_1000_1000.png.webp) no-repeat;
            background-size: cover;
        }

        .top .form {
            /*
            border: 1px solid red;*/
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            padding: .2415rem;
            width: 80%;
        }

        .form>div {
            width: 100%;
            margin-bottom: .314rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            position: relative;
        }

        .form input {
            /*iphone 无法获得焦点并输入
            all: unset;*/
            width: 100%;
            border: .0242rem solid rgba(128, 128, 128, 0.522);
            border-radius: .5556rem;
            caret-color: #4c97fb;
            height: 1.0145rem;
            box-sizing: border-box;
            padding-left: 1.0386rem;
            padding-right: .4348rem;
            font-size: .4589rem;

        }

        .icon1 {
            /*
            border: 1px solid red;*/
            width: .8454rem;
            height: .8454rem;
            margin-left: .1691rem;
            position: absolute;
            background: url(../../../../images/login/user.webp) no-repeat;
            background-size: contain;
        }

        .icon2 {
            /*
            border: 1px solid red;*/
            width: .8454rem;
            height: .8454rem;
            margin-left: .1691rem;
            position: absolute;
            background: url(../../../../images/login/pwd.webp) no-repeat;
            background-size: contain;
        }

        input::placeholder {
            color: #bcbcbc;
        }

        input:focus {
            border: .0242rem solid #4c97fb;
            box-shadow: .0725rem .0725rem .0725rem #a5a5a583;
        }

        .form button {
            all: unset;
            width: 100%;
            height: 1.0145rem;
            border-radius: 1.4493rem;
            background: #4c97fb;
            line-height: 100%;
            text-align: center;
            color: #fff;
            font-weight: 500;
            font-family: 黑体;
            font-family: SimHei;
            margin-top: .2415rem;
        }

        .bottom {
            /*
            border: 1px solid red;
            color: #8c8c8c;*/
            color: #fff;
            font-size: .3865rem;
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin-bottom: 15%;
        }

        /*弹窗样式*/
        #alert {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #00000047;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .window {
            border-radius: .2415rem;
            font-size: .4348rem;
            color: #2c2c2c;
            width: 70%;
            display: flex;
            flex-direction: column;
            align-items: center;
            /*
            box-sizing: border-box;
            padding: .4831rem .9662rem;*/
            background-color: #ffffff;
            overflow: hidden;
        }

        .window .alt_title {
            /*
            border: 1px solid red;*/
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            height: 1.087rem;
            font-weight: 600;

        }

        .window .alt_body {
            /*
            border: 1px solid red;*/
            width: 100%;
            /**/
            min-height: 1.9324rem;
            box-sizing: border-box;
            padding: .3623rem .4831rem .4831rem .4831rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: .4106rem;
        }

        .window .action1 {
            /**/
            border-top: .0242rem solid rgb(207, 207, 207);
            width: 100%;
            display: flex;
            flex-direction: row;

        }

        .window .action1 div {
            width: 50%;
            height: 1.2077rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fb4c4c;
        }

        .window .action2 {
            border-top: .0242rem solid rgb(207, 207, 207);
            width: 100%;
        }

        .window .action2 div {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 1.2077rem;
            color: #4c97fb;
        }

        .window .action1 div:nth-child(1) {
            border-right: .0121rem solid rgb(207, 207, 207);
        }

        .window .action1 div:nth-child(2) {
            color: #4c97fb;
            border-left: .0121rem solid rgb(207, 207, 207);
        }
    </style>
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="../../../../lib/axios.js"></script>
    <script src="../../../../lib/vue.js"></script>
    <script src="../../../../js/mobile-detect.min.js"></script>

    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> -->
</head>

<body>
    <div id="box">
        <div class="top">
            <div class="icon"></div>
            <div class="form">
                <div>
                    <div class="icon1"></div>
                    <input type="text" v-model="userid" name="" id="userid" @blur="onblur()" placeholder="工号/手机号/邮箱">
                </div>
                <div>
                    <div class="icon2"></div>
                    <input type="password" v-model="password" name="password" id="" placeholder="密码">
                </div>

                <button @click="handleClick()" type="button">登录</button>

            </div>
        </div>
        <div class="bottom">
            <a class="register" href="../pages/step1_1/step1_1.html">HUAT教务辅助注册</a>&nbsp;|&nbsp;<a class="" href="../../login.html">学生登录</a>
        </div>






        <!-- 弹窗 -->
        <div id="alert" v-show="alertShow">
            <div class="window">
                <div class="alt_title">{{alt_title}}</div>
                <div class="alt_body">{{alt_body}}</div>
                <div class="action action1" v-show="action1Show">
                    <div class="cancel" @click="cancel()">取消</div>
                    <div class="do" @click="yes()">确定</div>
                </div>
                <div class="action action2" v-show="!action1Show">
                    <div class="cancel" @click="cancel()">确定</div>
                </div>
            </div>
        </div>

    </div>

    <script>
        new Vue({
            el: "#box",
            data: {
                userid: "",
                password: "",
                model: "",
                alertShow: false,
                action1Show: false,
                alt_title: "提示",
                alt_body: ""
            },
            methods: {
                onblur(){
                    fetch(`https://fc-mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.next.bspapp.com/login/getMyInfo?userid=${this.userid}`)
                        .then(res => res.json())
                        .then(res => {
                            let img = document.querySelector(".top .icon")
                            if (res.res.affectedDocs === 1) {
                                if(res.res.data[0].userImg === ""){
                                    img.style.background=`url(../../../../images/login/XGB_logo_1000_1000.png.webp) no-repeat`
                                    img.style.backgroundSize='cover'
                                }else{
                                    img.style.background=`url(${res.res.data[0].userImg}) no-repeat`
                                    img.style.backgroundSize='cover'
                                }
                            }else{
                                img.style.background=`url(../../../../images/login/XGB_logo_1000_1000.png.webp) no-repeat`
                                img.style.backgroundSize='cover'
                            }
                        })
                },
                handleClick() {
                    //alert("账号："+this.userid+" 密码："+this.password)
                    if (/^\s*$/.test(this.userid)) {
                        this.alertShow = true
                        this.alt_body = "请填写账号！"
                    } else if (/^\s*$/.test(this.password)) {
                        this.alertShow = true
                        this.alt_body = "请填写密码！"
                    } else {
                        let btn = document.querySelector("button")
                        btn.style.background = "#85b8fb"
                        fetch(`https://fc-mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.next.bspapp.com/login/userLogin?userid=${this.userid}&password=${this.password}&model=${this.model}`)
                            .then(res => res.json())
                            .then(res => {
                                btn.style.background = "#4c97fb"
                                console.log(res)
                                if (res.status === 0) {
                                    console.log('账号或密码错误！')
                                    this.alertShow = true
                                    this.alt_body = "账号或密码错误！"
                                } else if (res.status === 1) {
                                    //写入本地localstorage
                                    let userInfo = {
                                        id: res.res.id,
                                        userId: res.res.userId,
                                        name: res.res.name,
                                        userImg: res.res.userImg,
                                        gender: res.res.gender,
                                        age: res.res.age,
                                        signature: res.res.signature,
                                        realInfo: res.res.realInfo
                                    }
                                    window.localStorage.setItem('XGB-user', JSON.stringify(userInfo))
                                    window.location.replace('../../../index/index.html')
                                    //获取：JSON.parse(localStorage.getItem('XGB-user'))

                                }else if(res.status === 205) {
                                    console.log('用户封禁！')
                                    this.alertShow = true
                                    this.alt_body = "此账号已被冻结/封禁！"
                                }
                            })
                    }



                },
                cancel() {
                    this.alertShow = false
                },
                yes() {
                    console.log("用户点击 “确定”")
                }

            },
            mounted() {
                Array.prototype.contains = function (needle) {
                    for (i in this) {
                        if (this[i].indexOf(needle) > 0)
                            return i;
                    }
                    return -1;
                }
                var device_type = navigator.userAgent; //获取userAgent信息 
                // document.write(device_type); //打印到页面 
                var md = new MobileDetect(device_type); //初始化mobile-detect 
                var os = md.os(); //获取系统 
                var model = "";
                if (os == "iOS") { //ios系统的处理 
                    os = md.os() + md.version("iPhone");
                    model = md.mobile();
                } else if (os == "AndroidOS") { //Android系统的处理 
                    os = md.os() + md.version("Android");
                    var sss = device_type.split(";");
                    var i = sss.contains("Build/");
                    if (i > -1) {
                        model = sss[i].substring(0, sss[i].indexOf("Build/"));
                    }
                }
                var shebeiName = model + "  " + os
                
                //console.log("model: " + model)
                //console.log("os: " + os)

                if (shebeiName == '  null') {
                    shebeiName = '电脑'
                    this.model = shebeiName
                } else {
                    shebeiName = shebeiName
                    this.model = model.trim()
                }


            }
        })
    </script>







    <script>
        //根据设备宽度计算html的font-size
        function resetHtmlFont() {
            //获取html对象并动态设置font-size = 设备宽度的1/10
            document.documentElement.style.fontSize = screen.width / 10 + 'px';
        }
        //执行一下
        resetHtmlFont();
        //如果窗口大小改变了，则重新计算基础font-size
        window.onresize = resetHtmlFont;
    </script>
</body>

</html>